<template>
  <div class="addaddress-container">
    <LayoutHeaderTitle title="添加地址" />
    <van-address-edit
      :area-list="areaList"
      show-set-default
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      :key="addressKey"
    />
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";

export default {
  layout: "notabbar",
  middleware: "authenticated",
  async asyncData() {
    return {};
  },
  data: () => ({
    areaList: areaList,
    lock: false,
    addressKey: "1"
  }),
  methods: {
    onSave(content) {
      if (this.lock) {
        return;
      }
      this.lock = true;
      const load = this.$helperLoadding("");
      this.$apiAddAddress(content)
        .then(res => {
          const { status, msg } = res;
          if (status === 0) {
            this.$toast(msg);
            this.addressKey = Math.random() + "";
            setTimeout(() => {
              this.$router.go(-1);
            }, 1000);
          }
        })
        .finally(() => {
          this.lock = false;
          load.clear();
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.addaddress-container {
  padding-top: 50px;
  background-color: #f7f8fa;
  height: 100vh;
  box-sizing: border-box;
  ::v-deep .van-address-edit-detail {
    padding: 0;
  }
}
</style>
